<template>
  <RouterLink  class="app-logo" :class="mode" to="/">
    <i class="logo-icon dtfont ditop-logo mr8"></i>
    <h1 class="logo-text">新疆工程建设云</h1>
  </RouterLink>
</template>

<script>
import { defineComponent, inject } from 'vue'

export default defineComponent({
  name: 'AppLogo',
  setup() {
    const mode = inject('mode');

    return { mode }
  }
})
</script>

<style lang="less" scoped>
.app-logo {
  display: flex;
  align-items: center;

  .logo-icon {
    font-size: 34px;
    line-height: 1;
    color: @white;
  }

  .logo-text {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1;
    color: white;
  }

  &.white {

    .logo-icon {
      color: @white;
    }

    .logo-text {
      color: @white;
    }
  }
}
</style>

